import { createApp } from 'vue'
import ToastNotification from '@/components/ToastNotification.vue'

class ToastService {
  constructor() {
    this.toasts = []
    this.container = null
    this.init()
  }

  init() {
    // Create toast container
    this.container = document.createElement('div')
    this.container.className = 'toast-container'
    this.container.style.cssText = `
      position: fixed;
      top: 0;
      right: 0;
      z-index: 3000;
      pointer-events: none;
    `
    document.body.appendChild(this.container)
  }

  // Show info toast
  info(message, options = {}) {
    return this.show(message, { ...options, variant: 'info' })
  }

  // Show success toast
  success(message, options = {}) {
    return this.show(message, { ...options, variant: 'success' })
  }

  // Show warning toast
  warning(message, options = {}) {
    return this.show(message, { ...options, variant: 'warning' })
  }

  // Show error toast
  error(message, options = {}) {
    return this.show(message, { ...options, variant: 'error' })
  }

  // Generic show method
  show(message, options = {}) {
    const config = {
      title: options.title || '',
      message,
      variant: options.variant || 'info',
      duration: options.duration !== undefined ? options.duration : 4000,
      showProgress: options.showProgress !== false
    }

    const toastElement = document.createElement('div')
    toastElement.style.pointerEvents = 'auto'
    this.container.appendChild(toastElement)

    const app = createApp(ToastNotification, {
      visible: true,
      ...config,
      onClose: () => {
        this.destroyToast(app, toastElement)
      }
    })

    app.mount(toastElement)
    
    const toastInstance = {
      app,
      element: toastElement,
      id: Date.now() + Math.random()
    }
    
    this.toasts.push(toastInstance)
    this.updatePositions()

    return toastInstance
  }

  // Destroy specific toast
  destroyToast(app, element) {
    app.unmount()
    if (element.parentNode) {
      element.parentNode.removeChild(element)
    }
    
    this.toasts = this.toasts.filter(toast => 
      toast.app !== app && toast.element !== element
    )
    
    this.updatePositions()
  }

  // Update positions of all toasts
  updatePositions() {
    this.toasts.forEach((toast, index) => {
      const topOffset = 20 + (index * 90) // 90px spacing between toasts
      toast.element.style.top = `${topOffset}px`
    })
  }

  // Clear all toasts
  clear() {
    this.toasts.forEach(({ app, element }) => {
      app.unmount()
      if (element.parentNode) {
        element.parentNode.removeChild(element)
      }
    })
    this.toasts = []
  }

  // Destroy service
  destroy() {
    this.clear()
    if (this.container && this.container.parentNode) {
      this.container.parentNode.removeChild(this.container)
    }
  }
}

// Create global instance
const toastService = new ToastService()

// Vue plugin
export default {
  install(app) {
    // $toast 作为默认方法，相当于 show 方法
    app.config.globalProperties.$toast = toastService.show.bind(toastService)
    
    // 提供完整的 toastService 实例
    app.config.globalProperties.$toastService = toastService
    
    // 提供便捷方法
    app.config.globalProperties.$notify = {
      info: toastService.info.bind(toastService),
      success: toastService.success.bind(toastService),
      warning: toastService.warning.bind(toastService),
      error: toastService.error.bind(toastService)
    }
  }
}

// Export service instance
export { toastService }